<template>
  <!-- 1.3 在跟标签添加 todoapp 类名  -->
  <div class="todoapp">
    <!-- 3.2 注册自定义事件，让子组件触发 -->
    <TodoHeader :arr="list" @create="createFn"></TodoHeader>
    <!-- 💥记得换成过滤后的 showArr 数组 -->
    <TodoMain @del="deleteFn" :arr="showArr"></TodoMain>
    <TodoFooter @changeType="typeFn" @clear="clearFn" :farr="showArr"></TodoFooter>
  </div>
</template>

<script>
// 1.1 使用组件四个步骤
//   1. 新建组件
//   2. 引入组件
//   3. 注册组件
//   4. 使用组件
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
// 1.2 项目样式引入(建议手打路径)
import "./styles/base.css"
import "./styles/index.css"
export default {
  // components 定义组件的结构
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  // data 定义数据的结构
  data () {
    return {
      list: JSON.parse(localStorage.getItem('todoList')) || [
        { id: 100, name: "吃饭", isDone: true },
        { id: 101, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
      getSel: 'all'
    }
  },
  // methods 定义函数/方法的结构
  methods: {
    // 创建任务
    createFn(theTask){
      // 3.3 push到数组里
      this.list.push({
        // id 准备
        id: this.list.length ? this.list[this.list.length - 1].id + 1 : 10,
        // 任务是子组件触发自定义事件的时候传过来的
        name: theTask,
        // 新建的任务默认都是未完成
        isDone: false
      })
    },
    // 删除任务
    deleteFn(theId){
      // 注意 filter 不改变原数组，需要重新赋值
      this.list = this.list.filter(item => item.id !== theId)
    },
    // 切换任务
    typeFn(theSel){
      this.getSel = theSel
      // showArr 变量计算时的依赖项有 getSel，
      // 所以 getSel 发生变化时，会<自动>重新计算出需要显示的任务
    },
    // 清除已完成
    clearFn(){
      // 真实修改了 list 
      this.list = this.list.filter(item=>item.isDone !== true)
    }
  },
  // computed 写计算属性的结构(算出来新的变量)
  computed: {
    // 需要展示出来的数组
    showArr(){
      if( this.getSel === 'yes' ){
        return this.list.filter(item=>item.isDone===true)
      }else if(this.getSel === 'no'){
        return this.list.filter(item=>item.isDone===false)
      }else{
        return this.list
      }
    }
  },
  watch: {
    list: {
      deep: true,
      handler(){
        localStorage.setItem('todoList',JSON.stringify(this.list))
      }
    }
  }
}
</script>

<style>

</style>